<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" id="zwy">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车页面</title>

    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="../basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="../css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="../css/optstyle.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script th:src="@{/layuiadmin/layui/layui.all.js}"></script>
</head>

<body>
<!--顶部导航条 -->
<div th:include="public/pagehead::common"></div>
<!--悬浮搜索框-->

<div class="nav white">
    <div class="logo"><img th:src="@{/images/logo.png}"/> <img th:src="@{/static/images/10.jpg}" alt=""/></div>
    <div class="logoBig">
        <li><img th:src="@{/images/logobig.png}"/></li>
    </div>

    <div class="search-bar pr">
        <a name="index_none_header_sysc" href="#"></a>
        <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
        </form>
    </div>
</div>

<div class="clear"></div>

<!--购物车 -->
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll">

                    </div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

        <tr class="item-list">
            <div class="bundle  bundle-last ">

                <div class="clear"></div>
                <div class="bundle-main"  th:each="product:${shopcartList}">
                    <ul class="item-content clearfix">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input class="check" th:id="${product.getShopNo()}" name="items" value="170769542747"
                                       type="checkbox">
                                <label th:for="${product.getShopNo()}"></label>
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                <a href="#" target="_blank"
                                   class="J_MakePoint" data-point="tbcart.8.12">
                                    <img style="height: 90px;width: 90px;" th:src="${product.getImage()}"
                                         src="../images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg"></a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a target="_blank"
                                       class="item-title J_MakePoint"
                                       data-point="tbcart.8.11" th:text="${product.getExtend3()}">美康粉黛醉美唇膏 持久保湿滋润防水不掉色</a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props "><!--item-props-can 是js获取的标志-->
                                <!--占位-->
                                <!--<span class="sku-line">颜色：10#蜜橘色</span>-->
                                <!--<span class="sku-line">包装：两支手袋装（送彩带）</span>-->
                                <!--<span tabindex="0" class="btn-edit-sku theme-login">修改</span>-->
                                <!--<i class="theme-login am-icon-sort-desc"></i>-->
                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                    <div class="price-line">
                                        <em class="J_Price price-now" tabindex="0" th:text="${product.getUnitPrice()}">39.00</em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input class="min am-btn" name="" type="button" value="-"/>
                                        <input class="text_box" name="number" type="text" th:value="${product.getQty()}" style="width:30px;"/>
                                        <input class="add am-btn" name="" type="button" value="+"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0" class="J_ItemSum number" th:text="${product.getProTotamt()}">117.00</em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <a title="移入收藏夹" class="btn-fav" href="#">
                                    移入收藏夹</a>
                                <a  data-point-url="#" class="delete">
                                    删除</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </tr>
    </div>
    <div class="clear"></div>

    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
            <div class="cart-checkbox">
                <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
                <label for="J_SelectAllCbx2"></label>
            </div>
            <span >全选</span>
        </div>
        <div class="operations">
            <a href="#" hidefocus="true" class="deleteAll">删除</a>
            <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
        </div>
        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">已选商品</span>
                <em id="J_SelectedItemsCount">0</em><span class="txt">件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price">¥<em id="J_Total">0.00</em></strong>
            </div>
            <div id="payBtn"class="btn-area">
                <a  id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                    <span >结&nbsp;算</span>
                </a>
            </div>
        </div>

    </div>


    <!-- introduce-->
    <div th:include="public/pagehead::footer"></div>

</div>

<!--操作页面-->

<script th:inline="javascript">
    ;!function(){
        //无需再执行layui.use()方法加载模块，直接使用即可
        var form = layui.form
            , layer = layui.layer;
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form;
        form.render();
        laydate.render();


        // -  改变商品数量与总价格
        $('input[value="-"]').on('click',function () {
            var redius = $(this)
            var number= redius.next().val()-1 //获取商品数量
            var price =  redius.parents('li').prev().find('em').text() //获取商品单价
            var pricerAll = redius.parents('li').next().find('em')
            pricerAll.text(number*price ) //修改该商品的金额
            var  price1 = getPriceFun()
            $('#J_Total').text(price1)
        })

        // +  改变商品数量与总价格
        $('input[value="+"]').on('click',function () {
            var redius = $(this)
            var number= redius.prev().val()/1+1//获取商品数量  先进性运算转为数字 防止拼接
            var price =  redius.parents('li').prev().find('em').text() //获取商品单价
            var pricerAll = redius.parents('li').next().find('em')
            pricerAll.text(number*price ) //修改该商品的金额
            var  price1 = getPriceFun()
            $('#J_Total').text(price1)
        })


        //结算时吧商品Id 跟数量封成对象发过去
        $('#payBtn').on('click',function () {
                var shopVO = [];
                for (var i= 0;i<$('input[name="items"]:checked').length;i++){
                    var getNum = $($('input[name="items"]:checked')[i]).parents('li').siblings('.td-amount').find('input[name="number"]').val() //得到数量
                    var price  =$($('input[name="items"]:checked')[i]).parents('li').siblings('.td-sum').find('em').text() //得到商品价格
                    shopVO.push({shopId:$('input[name="items"]:checked')[i].id,num:getNum,price:price,flag:0})
                }
                console.log(JSON.stringify(shopVO))
            $.ajax({
                type:'post',
                url:'paylist',
                data:JSON.stringify(shopVO),
                contentType: "application/json",
                async:false,
                success:function (res) {
                    if(res.code==1){
                        document.location.href="pay"
                    }
                },
                error:function () {
                    console.log("error")
                }
            })

            })

        //单个删除功能
        $('.delete').on('click',function () {
            var delId = $(this).parents('li').siblings('.td-chk').find('input')[0].id
            var delId1= {delId:delId}
            console.log(JSON.stringify(delId) )
            $.ajax({
                type:'post',
                async: false,
                url:'del',
                data:JSON.stringify(delId1),
                contentType: "application/json",
                success:function (res) {
                    if (res=="ok"){
                        layer.msg('删除成功', {
                            icon: 6,
                        },function () {
                            window.location.reload()
                        })}
                    console.log('success')
                },
                error:function (res) {
                    if (res=="error"){
                        layer.msg('删除失败', {
                            icon: 6,
                        })}
                    console.log('error')
                }
            })

        })

        //批量删除
        $('.deleteAll').on('click',function () {

            var deleIds = []
            for (var i= 0;i<$('input[name="items"]:checked').length;i++){
                deleIds.push($('input[name="items"]:checked')[i].id)
            }
                console.log(JSON.stringify(deleIds))
            $.ajax({
                type:'post',
                async: false,
                url:'delall',
                data:JSON.stringify({deleIds:deleIds}),
                contentType: "application/json",
                success:function (res) {
                    if (res=="ok"){
                        layer.msg('删除成功', {
                        icon: 6,
                    },function () {
                            window.location.reload()
                        })}
                    console.log('success')
                },
                error:function (res) {
                    if (res=="error"){
                        layer.msg('删除失败', {
                            icon: 6,
                        })}
                    console.log('error')
                }
            })

        })
        
        //得到价格
        function getPriceFun(){
            var a = 0
            for (var i= 0;i<$('input[name="items"]:checked').length;i++){
                var getPrice = $($('input[name="items"]:checked')[i]).parents('li').siblings('.td-sum').find('em').text()*1 //得到价格
                a += getPrice
            }
           return a;
        }
        //获取选中的商品的数量 与总金额
        $('input[name="items"]').on('click',function () {
            var allNumber = $('input[name="items"]:checked').length;
            $('#J_SelectedItemsCount').text(allNumber)  //更改件数
            var  price = getPriceFun()
            $('#J_Total').text(price)

        })
        //全选商品
        $('#J_SelectAllCbx2').on('click',function () {
            if ($("input[id='J_SelectAllCbx2']:checked").length) {
                $("input[name='items']").prop("checked",true);
                $('#J_SelectedItemsCount').text($("input[name='items']:checked").length)
                var  price = getPriceFun()
                $('#J_Total').text(price)
            }else{
                $("input[name='items']").prop("checked",false);
                $('#J_SelectedItemsCount').text($("input[name='items']:checked").length)
                var  price = getPriceFun()
                $('#J_Total').text(price)
            }
        })

    }();


</script>

</body>

</html>